<template>
  <div class="item" @contextmenu.prevent="rightClick">
    <!--<i class="el-icon-office-building"></i>-->
    <div class="img-box">
      <img :src="require('@/assets/house/mijijia.png')" alt="" />
    </div>
    <p v-if="!isShow">{{items.shelvingName}}</p>
    <el-input type="text"
              v-model="items.shelvingName"
              size="small"
              v-if="isShow"
              @blur="handleBlur(items)"></el-input>
  </div>
</template>

<script>
export default {
  name: 'withinListItem',
  props: {
    item: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      isShow: false
    }
  },
  computed: {
    items () {
      return this.item
    }
  },
  methods: {
    rightClick () {
      this.isShow = true
    },
    handleBlur (item) {
      this.isShow = false
      this.$emit('change', item)
    }
  }
}
</script>

<style lang="scss" scoped>
  .item{
    i {
      font-size: 108px;
    }
    .img-box{
      width: 102px;
      margin: 0 auto;
    }

    p {
      font-size: 14px;
      color: #999;
      height: 38px;
      overflow: hidden;
    }
  }
</style>
